<template>
    <div class="login_page">
    <div class="logo" :style="logo"></div>
      <div class="login-panel" :style="loginPanel">
        <h1>智慧消防系统</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm">
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" placeholder="账户">
              <i slot="prefix"><img src="" /></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" placeholder="密码">
              <i slot="prefix"><img src="" /></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div style="float: left; width:70%;">
              <el-input v-model="ruleForm.code" placeholder="验证码">
                <i slot="prefix"><img src="" /></i>
              </el-input>
            </div>
            <div style="float: right; width: 30%;height: 50px;">
              <img width="100%" @click="getImg" :src="codeUrl" height="40" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>
<script>
    import md5 from 'js-md5';
    import api from '@/api/api';
		import http from '@/http'
  export default {
    data() {
      return {
        loginPanel:{
          width:'',
          height:'',
        },
        logo:{
          width:'',
          height:'',
        },
        ruleForm: {
          name: '',
          password: '',
          code:''
        },
        rules: {
          name: [
            { required: true, message: '请输入账户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        },
        codeUrl:''
      };
    },
    methods: {
      init(){
        var loginpanelWidth = document.body.offsetWidth * 498 / 1920;
        var loginpanelHeight = document.body.offsetHeight * 464 / 974;
        var percentHeight = 464 / 974;
        this.loginPanel.height=loginpanelHeight+'px';
        this.loginPanel.width=loginpanelWidth+'px';
        this.logo.width=(loginpanelWidth * 170 / 498)+'px';
        this.logo.height=(loginpanelHeight * 55 / 464)+'px';
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http2.post(api.login, {
            "userName": this.ruleForm.name,
            "password": md5(this.ruleForm.password),
            "identifyCode": this.ruleForm.code,
            })
            .then(data => {
                this.$router.push({ path: '/index'});
              console.log("成功");
            }).catch(()=>{
              console.log("失败");
            });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getImg(){
				this.codeUrl = http.defaults.baseURL + '/sys/getImage?d='+Math.random();
      }
    },
    created(){
      this.getImg()
//      this.init()
    }
  }
</script>
<style lang="less">
.login_page{
    width: 100%;
    height: 100%;
    background: url('../assets/img/loginbg.png');
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    .logo {
        position: fixed;
        top: 3.4%;
        left: 5%;
        background: url(../assets/img/loginlogo.png) no-repeat;
      background-size: contain;
        width: 170px;
        height: 55px;
    }
    .login-panel {
        width: 350px;
        height: 350px;
        overflow: hidden;
        background-color: #fff;
        margin: 0;
        padding: 20px 30px;
        position: fixed;
        top: 17%;
        right: 8.6%;
        h1 {
            font-size: 24px;
            color: #333;
            text-align: center;
        }
        .el-button--primary{
            width: 100%;
            height: 40px;
            border-radius: 0;
        }

        .el-input__inner {
            border-radius: 0;
        }
        .el-input__prefix {
            top: 7px;
        }
    }
}
</style>

